<template>
  <div id="canvasZone"><canvas id="renderCanvas" ref="renderCanvas"></canvas></div>
</template>

<script>
import * as BABYLON from 'babylonjs'
import 'babylonjs-loaders'

export default {
  mounted () {
    this.createScene()
  },
  methods: {
    async getmodeltxt () {
      const ftc = await fetch("./xt/jybase.txt");
      const modeltxt = await ftc.text();
      return modeltxt;
    },
    async createScene () {
      const canvas = this.$refs.renderCanvas
      const engine = new BABYLON.Engine(canvas, true)

      const scene = new BABYLON.Scene(engine)
      // var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0, 0, 5), scene);
      // camera.attachControl(canvas, true);

      // const camera = new BABYLON.ArcRotateCamera("Camera", 1.6, 0.004, 22517, BABYLON.Vector3.Zero(), scene);
      // camera.lowerBetaLimit = 0.01;
      // camera.upperBetaLimit = 3.13;
      // camera.lowerRadiusLimit = 5421.9789;
      // camera.upperRadiusLimit = 33684.3284;
      // camera.inertialPanningX = 0;
      // camera.inertialPanningY = 0;
      // camera.pinchToPanMaxDistance = 20;
      // camera.panningOriginTarget = new BABYLON.Vector3(0, 0, 0);
      // camera.panningInertia = 0.9;
      // //camera.zoomToMouseLocation=true;
      // camera.zoomOnFactor = 1;
      // // camera.allowUpsideDown=false; useless
      // camera.useInputToRestoreState = true;
      // //camera.position=new BABYLON.Vector3(-2327.804290972812,26434.60855492722,5936.044328022515);
      // camera.fov = 0.8;
      // camera.minZ = 288;
      // camera.maxZ = 28898967;
      // camera.fovMode = 0;

      // camera.attachControl(canvas, true, false);
      // camera.checkCollisions = true;
      // camera.wheelPrecision = 0.01;

      let camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 4, Math.PI / 3, 12, BABYLON.Vector3.Zero(), scene);
      // //var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

      // // This targets the camera to scene origin
      // camera.setTarget(BABYLON.Vector3.Zero());

      // // This attaches the camera to the canvas
      // camera.attachControl(canvas, true);

      // var light = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene)
      new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
      new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);

      const yourBase64ModelData = await this.getmodeltxt();

      BABYLON.SceneLoader.Append(
        'data:',
        'data:base64,' + yourBase64ModelData,
        scene,
        function (loadedScene) {
          // 模型加载完成后的操作
          // 获取加载的模型
          var model = loadedScene.meshes[0];
          // 设置模型的大小
          model.scaling = new BABYLON.Vector3(0.001, 0.001, 0.001);
          // 设置模型的位置
          model.position = new BABYLON.Vector3.Zero();
          // 创建一个相机
          // camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, model.position, scene);

          // 设置相机的目标为模型的位置
          camera.setTarget(model.position);

          // 启用鼠标控制
          camera.attachControl(canvas, true);

          // 将相机绑定到场景
          scene.activeCamera = camera;
        }
      )


      engine.runRenderLoop(() => {
        if (scene) {
          scene.render()
        }
      })

      window.addEventListener('resize', () => {
        engine.resize()
      })
    }
  }
}
</script>

<style>
#renderCanvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}

#canvasZone {
  width: 100%;
  height: 100%;
}
</style>